<template>
	<view :style="{'--color':color}">
		<status-bar title="申请列表"></status-bar>
		<view class="list" v-for="(item,index) in pageData" :key="index">
			<view class="d-flex a-center">
				<image :src="$imgUrls(item.head_img)" mode="aspectFill" class="head_img"></image>
				<view class="Box">
					<text class="name">{{item.name}}</text>
					<text class="Tel">{{item.tel}}</text>
					<text class="Tel">{{item.add_date}}</text>
				</view>
				<view class="iconfont icon-tongguo color size40" v-if="item.sncode_flag == 1"></view>
				<view class="iconfont icon-butongguo color_99 size40" v-if="item.sncode_flag == 2"></view>
			</view>
			<view class="examine" v-if="item.sncode_flag == 0">
				<view class="lst" v-for="(subItem,subindex) in item.sncode" :key="subindex">
					<text class="title">{{subItem.title}}:</text>
					<text class="flex-1 text">{{subItem.text}}</text>
				</view>
				<view class="btnBox">
					<view class="btns Cancel" @click.stop="Continue(item,2)">拒绝</view>
					<view class="btns Config bgcolor" @click.stop="Continue(item,1)">同意</view>
				</view>
			</view>
		</view>

		<emptys v-if="!pageData.length" title="暂无相关内容"></emptys>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				orderId: '',
				pageData: [],
			}
		},
		onLoad(opt) {
			if (opt.orderId) this.orderId = opt.orderId
		},
		onShow() {
			this.getUserOrdersList();
		},
		methods: {
			getUserOrdersList() {
				this.$http.post({
					url: '/privateTeamApi/getUserOrdersList',
					data: {
						orderId: this.orderId
					}
				}).then(res => {
					if (res.errcode != 100) return this.$Toast(res.msg);
					const result = res.data || [];
					this.pageData = result;
				})
			},

			Continue(item, sncode_flag) {
				let tips;
				tips = sncode_flag == 1 ? '确定通过申请吗' : '确定拒绝申请吗';
				this.$Modal('提示', tips).then(res => {
					if (!res) return;
					this.$http.post({
						url: '/gsyxcxApi/editOrders',
						data: {
							sncode_id: item.sncode_id,
							sncode_flag
						}
					}).then(resCode => {
						if (resCode.errcode != 100) return this.$Toast(resCode.msg);
						this.$Toast(resCode.msg);
						this.getUserOrdersList();
					})

				})
			}
		},
		computed: {
			...mapState(['color'])
		}
	}
</script>

<style lang="scss">
	page {
		background-color: $page;
		padding-bottom: 100rpx;
	}
</style>
<style lang="scss" scoped>
	.list {
		width: 690rpx;
		margin: 24rpx auto 0;
		background-color: #fff;
		border-radius: 10rpx;
		padding: 24rpx;

		position: relative;

		.iconfont {
			position: absolute;
			right: 24rpx;
			top: 30rpx;
		}

		.head_img {
			width: 120rpx;
			height: 120rpx;
			border-radius: 10rpx;
			margin-right: 30rpx;
		}

		.Box {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.name {
				color: #000;
				font-size: 30rpx;
			}

			.Tel {
				color: #999;
				font-size: 26rpx;
			}
		}
	}

	.examine {
		width: 100%;
		display: flex;
		flex-direction: column;
		margin-top: 20rpx;
		border-top: 1px solid #f2f2f2;

		.lst {
			width: 100%;
			display: flex;
			align-items: center;
			margin-top: 20rpx;

			.title {
				color: #000;
				font-size: 30rpx;
				margin-right: 24rpx;
			}

			.text {
				color: #333;
				font-size: 28rpx;
			}
		}

		.btnBox {
			width: 100%;
			display: flex;
			justify-content: space-around;
			margin-top: 40rpx;

			.btns {
				width: 260rpx;
				height: 80rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 10rpx;
				font-size: 28rpx;
			}

			.Cancel {
				background-color: #f2f2f3;
				color: #999;
			}

			.Config {
				color: #fff;

			}
		}
	}
</style>